<template>
	<view class="my-quequ page">
		<UserDate :showDate='false' @changeUser='onChangeUser'></UserDate>
		<view class="my-quequ-box">
			<view class="reminder">
				<view class="reminder-title">
					温馨提示
				</view>
				<view class="reminder-content">
					<view v-for="(item, index) in reminders" :key="item.key">
						{{(index+1) + '.' + item.label}}
					</view>
				</view>
			</view>
			<view class="my-quequ-main">
				<view v-for="(item,index) in listData" :key="index" class="my-quequ-main-item" style="margin-bottom: 30rpx;">
					<view class="my-quequ-main-item-title flexR" :style="{backgroundColor:item.frontNum==1?orageColorDark:themeColor}">
						<view class="left flexC">
							<text>挂号日期</text>
							<text style="margin-top: 10rpx;">{{type==='3'?item.ghrq:item.createTime}}</text>
						</view>
						<view class="right flexR">
							<text class="iconfont icon-naozhong"></text>
							<view class="flexC">
								<text>{{item.frontNum}}</text>
								<text style="margin-top: 10rpx;">等待人数</text>
							</view>
						</view>
					</view>
					<view class="my-quequ-main-item-content" v-if="type==='3'">
						<view class="card-row" v-for="cItem in cardLabel" :key='cItem.fKey'> 
						<label style="width: 200rpx;">{{cItem.label}}</label>{{item[cItem.key]}} </view>
					</view>
					<view class="my-quequ-main-item-content" v-else-if="type==='2'">
						<view class="card-row" v-for="cItem in cardLabelQY" :key='cItem.fKey'> 
						<label style="width: 200rpx;">{{cItem.label}}</label>{{item[cItem.key]}} </view>
					</view>
					<view class="my-quequ-main-item-content" v-else>
						<view class="card-row" v-for="cItem in cardLabelJC" :key='cItem.fKey'> 
						<label style="width: 200rpx;">{{cItem.label}}</label>{{item[cItem.key]}} </view>
					</view>
				</view>
				<u-empty v-if="!load&&listData.length===0" text="暂无排队信息" mode="list"></u-empty>
			</view>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import Load from '@/components/Load/index.vue'
	import UserDate from '@/components/UserInfo/user-date.vue'
	import { themeColor, orageColorDark } from '@/static/js/theme.js'
	import { getQueuing } from '@/api/otherService.js'
	import { mapGetters } from 'vuex'
	export default {
		components:{ UserDate, Load },
		data() {
			return {
				themeColor, orageColorDark,
				value:null,
				type:'0',
				load:false,
				reminders:[
					{
						label: '排队信息只查询当天未就诊的挂号信息',
						key:'reminder1'
					}
				],
				listData:[],
				cardLabelJC:[
					{
						label:'检验项目：',
						key:'labelName',
						fKey:'label1'
					},
					{
						label:'患者姓名：',
						key:'name',
						fKey:'label2'
					},
					{
						label:'科室：',
						key:'applyDeptName',
						fKey:'label3'
					},
					{
						label:'医生：',
						key:'toDocName',
						fKey:'label4'
					}
				],
				cardLabelQY:[
					{
						label:'患者姓名：',
						key:'name',
						fKey:'label2'
					},
					{
						label:'药房名称：',
						key:'applyDeptName',
						fKey:'label3'
					},
					{
						label:'取药窗口：',
						key:'toDocName',
						fKey:'label4'
					}
				],
				cardLabel:[
					{
						label:'科  室：',
						key:'applyDeptName',
						fKey:'label1'
					},
					{
						label:'就诊地址：',
						key:'deptLocation',
						fKey:'label2'
					},
					{
						label:'医  生：',
						key:'toDocName',
						fKey:'label3'
					},
					{
						label:'就诊序号：',
						key:'serialNum',
						fKey:'label4'
					},
					{
						label:'当前看诊序号：',
						key:'currentNum',
						fKey:'label5'
					},
					{
						label:'平均就诊时间：',
						key:'averageTime',
						fKey:'label6'
					},
					{
						label:'预计等待时间：',
						key:'expectTime',
						fKey:'label7'
					},
				]
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		async onLoad(op) {
			// type :0检验 1检查 2取药 3就诊排队情况
			if(op.type){
				this.type = op.type
				if(op.type==='0'){
					this.showDate = false
					uni.setNavigationBarTitle({
						title: '检查排队'
					});
					this.reminders.label = '排队信息只查询当天未检查的排队信息'
				}else if(op.type==='1'){
					this.showDate = true
					uni.setNavigationBarTitle({
						title: '检验排队'
					});
					this.reminders.label = '排队信息只查询当天未检验的排队信息'
				}else if(op.type==='2'){
					uni.setNavigationBarTitle({
						title: '取药排队'
					});
					this.reminders.label = '排队信息只查询当天未取药的排队信息'
				}
			}
			await this.$onLaunched
			this.initData()
		},
		methods: {
			initData(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				let params = {
					patid: this.userInfo.patId,
					jcjybz: this.type
				}
				this.load = true
				getQueuing(params).then(data => {
					this.load = false
					this.listData = data||[]
				}).catch(e => {
					this.listData = []
					this.load = false
				})
			},
			toPage(url){
				uni.navigateTo({
					url
				})
			},
			onChangeUser(val){
				this.initData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-quequ{
		&-box{
			height: calc(100vh - 80rpx);
			overflow: scroll;
		}
		&-main{
			background-color: $uni-bg-color;
			margin-top: 10rpx;
			padding: 30rpx;
			height: 100%;
			&-item{
				&-title{
					height: 110rpx;
					font-size: 24rpx;
					border-radius: 6rpx 6rpx 0 0;
					padding: 0 24rpx;
					background-color: $orage-color;
					justify-content: space-between;
					color: $text-color-fff;
					align-items: center;
					>.right{
						>.iconfont{
							font-size: 30px;
							margin-right: 10rpx;
						}
						>.flexC{
							align-items: center;
						}
					}
				}
				&-content{
					padding: 30rpx;
					>.card-row{
						min-width: 160rpx;
					}
				}
			}
		}
	}
</style>